<template>
	<div class="main">
		<!--<div class="header_title">填写注册信息</div>-->
		<div  class="register-form">
			<!-- 输入手机号，调起手机号键盘 -->
			<!--<div class="phone">
				<van-field
					v-model="form.Mobile"
					type="number"
					label="手机号"
					maxlength="11"
				/>
				<span class="code" v-if="code">
					{{ code }}
				</span>
                <span class="code" v-else @click="_getCode">获取验证码</span>
            </div>-->
            <!-- 允许输入正整数，调起纯数字键盘 -->
            <!--<van-field v-model="form.VerifyCode" type="number" label="验证码"/>-->
            <van-field style="margin-bottom: 10px" v-model="form.ChnName" label="姓名" required placeholder="请输入姓名" input-align="right"/>
            <van-field style="margin-bottom: 10px" v-model="form.WorkCode" label="工号" placeholder="请输入工号" input-align="right"/>
            <!-- 输入密码 -->
            <van-field v-model="form.Password" type="password" label="密码" required placeholder="请输入密码" input-align="right"/>
            <van-field v-model="form.ConfirmPassword" type="password" label="确认密码" required placeholder="请确认密码" input-align="right"/>
            <div style="margin: 20px">
                <van-button class="br-5" block type="info" @click="onSubmit">提交</van-button>
            </div>
        </div>

    </div>
</template>

<script>
import { Toast, Form } from 'vant'
import {SendSms, Register } from '@/api/public'
var wait = 60
export default {
  components: {},
  data() {
    return {
      code: '',
      form: {
        Mobile: '',
        VerifyCode: '',
        ChnName: '',
        WorkCode: '',
        Password: '',
        ConfirmPassword: '',
      },

    }
  },
  methods: {
    // 获取验证码
    _getCode() {
      if (!/^1[3-9]\d{9}$/.test(this.form.Mobile)) {
        this.$toast('请输入正确的手机号')
        return
      }
      this.time()
      // 发送请求,用post方式
      const data = {
        mobile: this.form.Mobile,
      }
     SendSms( data)
        .then((res) => {
          if (res.success) {
            console.log('获取成功')
          }
        })
        .catch((err) => {
          console.log('获取失败')
        })
    },
    // 倒计时
    time() {
      var that = this
      if (wait == 0) {
        that.code = ''
        wait = 60
      } else {
        that.code = wait + 's' + '重新发送'
        wait--
        setTimeout(function () {
          that.time()
        }, 1000)
      }
    },

    // 表单提交
    onSubmit() {
      if (!/^1[3-9]\d{9}$/.test(this.form.Mobile)) {
        this.$toast('请输入正确的手机号')
        return
      }
      if (!this.form.VerifyCode) {
        this.$toast('请输入验证码')
        return
      }
      if (!this.form.ChnName) {
        this.$toast('请输入名称')
        return
      }
      if (!this.form.ChnName) {
        this.$toast('请输入名称')
        return
      }
      if (!this.form.WorkCode) {
        this.$toast('请输入工号')
        return
      }
      if (!this.form.Password) {
        this.$toast('请输入密码')
        return
      }
      if (!this.form.ConfirmPassword) {
        this.$toast('请确认密码')
        return
      }
      if (this.form.Password !== this.form.ConfirmPassword) {
        this.$toast('两次密码输入不一致')
        return
      }
      Register(this.form)
        .then((res) => {
          Toast.success('注册成功')
          setTimeout(() => {
            this.$router.push('/login')
          }, 1500)
        })
        .catch((err) => {
          console.log('失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>

.phone {
	position: relative;
	.code {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 12px;
	}
}
</style>

